<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <title>数据采集器主页</title>
  <script th:src="@{~/jquery.js}" type="text/javascript"></script>
  <script>
    window.onload = function () {
      setInterval("check()", 5000)
    }

    function restart() {
      $.post({
        url: "/restartAll",
        success: function (res) {
          console.log(res.result.msg)
          $("#msg").text(res.result.msg)
        }
      })
    }

    function pause() {
      $.post({
        url: "/pauseAll",
        success: function (res) {
          console.log(res.result.msg)
          $("#msg").text(res.result.msg)
        }
      })
    }

    function check() {
      $.post({
        url: "/check",
        success: function (res) {
          console.log(res.result.smoke)
          $("#smoke").text(res.result.smoke)
          $("#fire").text(res.result.fire)
          $("#co").text(res.result.co)
        }
      })
    }
  </script>
</head>
<body>
<h1>数据采集器</h1>

<div>
  <h2>本数据采集器硬件基本信息</h2>

  <table>
    <tr>
      <td>类别</td>
      <td th:text="${info.getCategory()}"></td>
    </tr>
    <tr>
      <td>名称</td>
      <td th:text="${info.getName()}"></td>
    </tr>
    <tr>
      <td>描述</td>
      <td th:text="${info.getDescription()}"></td>
    </tr>
    <tr>
      <td>位置</td>
      <td th:text="${info.getLocation()}"></td>
    </tr>
    <tr>
      <td>url</td>
      <td th:text="${info.getUrl()}"></td>
    </tr>
    <tr>
      <td>软件版本</td>
      <td th:text="${info.getVersion()}"></td>
    </tr>
  </table>
</div>

<h2>控制面板</h2>
<button onclick="pause()">暂停</button>
<button onclick="restart()">重启</button>
<span id="msg"></span>
<div>
  <div>
    烟雾传感器，当前状态 <span id="smoke"></span>
  </div>
  <div>
    火焰传感器，当前状态 <span id="fire"></span>
  </div>
  <div>
    一氧化碳传感器，当前状态 <span id="co"></span>
  </div>
</div>
<div>
  <h2>说明</h2>
  <span>此网页仅为示例，对于不同硬件的上位机，需要分别开发适配</span>
</div>
</body>
</html>
